<div class="ct-productMeta--single">
    <div class="row usgs-messages ng-cloak">
        <div class="col-md-12 col-lg-12">
            <ul>
                {% for message in messages %}
                <div class="alert {% if message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}alert-success{% else %}alert-danger{% endif %}" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    {{ message }}
                </div>
                {% endfor %}
                {% if use_angular %}
                    <div class="alert" role="alert" ng-repeat="message in messages" ng-class="message.class">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <span ng-bind="message.text"/>
                    </div>
                {% endif %}
            </ul>
        </div>
    </div>
    <div class="row weather-messages ng-cloak">
        <div class="col-md-12 col-lg-12">
            {% if use_angular %}
                <div class="alert alert-warning" ng-if='weather_messages.length > 0'>
                    <button type="button"  onclick="$('.weather-messages').fadeOut('slow');$(this).trigger('weatherWarningsHidden');" class="close">&times;</span></button>
                    <div class="alert-icon">
                        <i style="color:white;" class="fa fa-warning"></i>
                    </div>
                    <div class="alert-text">
                        <h5>Weather Warning</h5>
                        <div id="weathersum">                    
                            <div ng-show="$parent.showDetails" ng-click="$parent.showDetails = false">
                                <span ng-bind-html="weather_messages.length + ' weather related warnings <u><a>Hide</a></u>'"/>
                            </div>
                            <div ng-show="!$parent.showDetails" ng-click="$parent.showDetails = true">
                                <span ng-bind-html="weather_messages.length + ' weather related warnings <u><a>Show</a></u>'"/>
                            </div>
                        </div>
                        <div id="weatherwarnlist" ng-show="$parent.showDetails==true">
                            <ul ng-repeat="message in weather_messages">
                                <li ng-bind-html="message.text"/>
                            </ul> 
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>